import '../../../styles/bar-list.less'

export default {
  name: 'CimBarList',
  props: {
    dataObject: {
      type: Object,
      default: () => ({})
    },
    configureList: {
      type: Array,
      default: () => []
    },
    activeId: {
      type: [String, Number],
      default: ''
    },
    getContent: {
      type: Function
    }
  },
  data () {
    return {
      localActiveId: this.activeId
    }
  },
  watch: {
    activeId (id) {
      this.localActiveId = id
    }
  },
  methods: {
    handleClickItem (id) {
      if (this.localActiveId === id) {
        this.localActiveId = ''
        return this.$emit('update:activeId', '')
      }

      this.localActiveId = id
      this.$emit('update:activeId', id)
    }
  },
  render (h) {
    const { configureList, localActiveId, dataObject } = this
    const { getContent, handleClickItem } = this

    return (
      <div class="cim-barList">
        { configureList.map((item, index) => (
          <div
            key={index}
            class={[
              localActiveId === (item.id || index + 1) ? 'cim-barList__item--active' : '',
              'cim-barList__item'
            ]}
            onClick={() => handleClickItem(item.id || index + 1)}
          >
            { item.titles && item.titles.map((title, i) => (
              getContent(
                `title${index}${i}`,
                dataObject,
                title,
                {
                  tag: 'h3',
                  class: 'cim-barList__item__title',
                  key: 'title' + i
                }
              )
            )) }

            { item.contents && item.contents.map((content, i) => (
              getContent(
                `content${index}${i}`,
                dataObject,
                content,
                {
                  tag: 'p',
                  class: 'cim-barList__item__content',
                  key: 'content' + i
                })
            )) }

            <span
              class={[
                'cim-barList__item__icon',
                localActiveId === (item.id || index + 1) ? 'cim-barList__item__icon--open' : ''
              ]}
            >
              <i class="el-icon-arrow-right"></i>
            </span>
          </div>
        )) }
      </div>
    )
  }
}
